<template>
  <div>
    <ZgDialog v-model="showFormSelDialog" :showFooter="false" title="选择表单">
      <div class="flx-s mb10">
        <ZgInput v-model="searchStr" placeholder="请输入表单名称"></ZgInput>
        <ZgButton icon="search" @click="searchFormList">查询</ZgButton>
      </div>
      <a-table
        :data-source="formList"
        :pagination="false"
        :scroll="{x:0,y:winHeight-400}">
        <a-table-column title="名称" data-index="name"></a-table-column>
        <a-table-column title="编码" data-index="code"></a-table-column>
        <a-table-column title="操作" :width="100">
          <template slot-scope="text, record">
            <ZgButton icon="" type="link" @click="selForm(record)">选择</ZgButton>
          </template>
        </a-table-column>
      </a-table>
    </ZgDialog>
    <a-card size="small">
      <div class="flx-s" slot="title">
        <div class="diy-link" @click="$emit('back')">
          <i class="fa fa-angle-left mr10"/>表单管理
        </div>
        <div>&nbsp;/&nbsp;</div>
        <div class="diy-link" @click="toSelForm">{{ formName }}</div>
      </div>
      <div slot="extra">
        <ZgDropdown type="link" :opts="opts" @click="t=>$emit('mode',t)"></ZgDropdown>
      </div>
      <div v-if="formId!==null">
        <slot></slot>
      </div>
      <ZgEmpty v-else description="未查询到表单数据"></ZgEmpty>
    </a-card>
  </div>
</template>
<script>
export default {
  props: {
    form: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      showFormSelDialog: false,
      searchStr: '',
      formId: '',
      formName: '',
      formList: [],
      opts: [
         { label: '字段管理', code: 'column', disabled: false, divided: false },
         { label: '视图管理', code: 'view', disabled: false, divided: false },
         { label: '公式管理', code: 'formula', disabled: false, divided: false },
         { label: '模板管理', code: 'tmpl', disabled: false, divided: false }
      ]
    }
  },
  mounted () {
    if (this.form !== null) {
      this.formId = this.form.id
      this.formName = this.form.name
      this.$emit('change', this.formId)
    } else {
      this.searchFormList((data) => {
        if (data.length > 0) {
          this.formId = data[0].id
          this.formName = data[0].name
          this.$emit('change', this.formId)
        }
      })
    }
  },
  methods: {
    searchFormList (callback) {
      this.$http.get('/zg-autoform/form/topN', {
        searchStr: this.searchStr,
        topN: 10
      }, data => {
        this.formList = data
        if (callback) {
          callback(data)
        }
      })
    },
    toSelForm () {
      this.showFormSelDialog = true
    },
    selForm (record) {
      this.formId = record.id
      this.formName = record.name
      this.showFormSelDialog = false
      this.$emit('change', this.formId)
    }
  }
}
</script>

<style lang="scss" scoped>
.diy-link{
  cursor:pointer;
  &:hover{
    color:#40a9ff;
  }
}
</style>
